<template>
  <u-popup
      :show="visible"
      @close="closeHandle"
      :duration="duration"
      :mode="mode"
      :closeOnClickOverlay="maskClose"
      :round="round"
      :bg-color="popupBgColor"
  >
    <div class="edu-popup-container">
      <div class="popup-header" v-if="header">
        <text class="popup-btn" @click="closeHandle">{{ cancelText }}</text>
        <text class="popup-title">{{ title }}</text>
        <text class="popup-btn confirm" @click="confirmHandle">{{ okText }}</text>
      </div>
      <slot/>
    </div>
  </u-popup>
</template>

<script>
export default {
  watch: {
    visible(v) {
      if (!v) {
        this.closed()
      }
    }
  },
  data() {
    return {
      show: true,
    }
  },
  emits: ['update:visible', 'close', 'closed', 'confirm'],
  computed: {
    popupBgColor() {
      if (this.isTransparent) return 'transparent'
      return this.bgColor || ''
    },
  },
  props: {
    isTransparent: {
      type: Boolean,
      default: () => false
    },
    title: {
      type: String,
      default: () => "",
    },
    header: {
      type: Boolean,
      default: () => true
    },
    okText: {
      type: String,
      default: () => "确定",
    },
    cancelText: {
      type: String,
      default: () => "取消"
    },
    maskClose: {
      type: Boolean,
      default: () => true,
    },
    bgColor: {
      type: String,
      default: () => '',
    },
    customStyle: {
      type: Object,
      default: () => ({}),
    },
    mode: {
      type: String,
      default: () => 'bottom'
    },
    duration: {
      type: Number,
      default: () => 300,

    },
    round: {
      type: [String, Number],
      default: () => 0
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    async closed() {
      await this.$delay(this.duration)
      this.$emit('closed')
    },
    closeHandle() {
      this.$emit('close')
    },
    confirmHandle() {
      this.$emit('confirm')
    },
  },
}
</script>

<style lang="scss" scoped>
.edu-popup-container {
  height:100%;
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;

    .popup-title {
      color: #212121;
      font-size: 28rpx;
    }

    .popup-btn {
      font-size: 30rpx;
      color: #626262;

      &.confirm {
        color: #0F6EDA;
      }
    }
  }
}
</style>
